@include('admin.layout.css')
@include('admin.layout.js')




<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">
    <div class="layui-form-item">
        <label class="layui-form-label"> 颜色</label>
        <div class="layui-input-inline">
            <div class="layui-input-inline">
                <input type="text"   id="color_input"  placeholder="请输入 商品颜色" autocomplete="off" class="layui-input" >
            </div>
            <button type="button" class="layui-btn layui-btn-normal" id="addColor">添加</button>
        </div>
        <label class="layui-form-label"> 尺码</label>
        <div class="layui-input-inline">
            <input type="text"   id="size_input"  placeholder="请输入 商品尺码" autocomplete="off" class="layui-input" >
            <button type="button" class="layui-btn layui-btn-normal" id="addSize">添加</button>
        </div>
    </div>

    <div class="layui-form-item" style="margin-top:20px">
        <label class="layui-form-label"> 规格表</label>
        <div class="layui-input-block">
            <table class="layui-table">
                <thead>
                <tr>
                    <th width="70">规格名字</th>
                    <th>规格值<button type="button" class="layui-btn layui-btn-xs" id="geranetrTable">生成表格</button></th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>颜色</td>
                    <td id="colors_show">
                        @foreach($colors as $value)
                            <button class='colors_item layui-btn'>{{$value['txt']}}</button>
                        @endforeach
                    </td>
                </tr>
                <tr>
                    <td>尺寸</td>
                    <td id="sizes_show">
                        @foreach($sizes as $value)
                            <button class='sizes_item layui-btn'>{{$value['txt']}}</button>
                        @endforeach
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <input type="hidden" id="project_id" value="{{$project_id}}">
    <div>

    </div>

    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="submit" id="submit" value="确认">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-edit" id="layuiadmin-app-form-edit" value="取消">
    </div>

</div>






<script>


</script>

<script>


    function buildTable(){
       console.log(colors)
       console.log(sizes)
        //循环表格

    }

    let colors = []
    let sizes = []

    $("#addColor").click(function (){
        // colors.push($("#color_input").val())
        $("#colors_show").append("<button class='colors_item layui-btn'>"+$("#color_input").val()+"</button>")
        colors.push($("#color_input").val());
    })

    $("#addSize").click(function (){
        // colors.push($("#color_input").val())
        $("#sizes_show").append("<button class='sizes_item layui-btn layui-btn-normal'>"+$("#size_input").val()+"</button>")
        sizes.push($("#size_input").val());

    })

    $('#colors_show').on('click','.colors_item',function (){

        colors.splice($.inArray($(this).text(),colors),1);
        $(this).remove()
    })

    $('#sizes_show').on('click','.sizes_item',function (){
        sizes.splice($.inArray($(this).text(),sizes),1);
        $(this).remove()
    })

    $("#geranetrTable").click(function (){
        buildTable();
    });





    layui.use(['laydate','form'], function() {
        let form = layui.form;
        form.on('submit(submit)', function(data){
            Api.add("{{route('admin.xiangmu.set_skus')}}", {
                'colors': colors,
                'sizes': sizes,
                'project_id':$("#project_id").val()
            },function(res){
                if (res.code !== 200){
                    Utils.errorToast(res.msg);
                    return;
                }
            });
        });


    });
</script>
